//@name: mixins.less
//@description: 通用类定义
//@author: Alan(alan_webdeveloper@163.com)
//@update: 2020-05-28 10:23
.fl() {
    float: left;
}

.fr() {
    float: right;
}

.clearFix() {
    &before,
    &:after {
        content: " ";
        display: table;
        zoom: 1;
    }
    &:after {
        clear: both;
    }
}

.img-responsive() {
    display: block;
    max-width: 100%;
    height: auto;
}

.center-block() {
    margin-left: auto;
    margin-right: auto;
}

//网速慢导致图片加载抖动 优化
#img-optimize(@name: 100%, @bgColor: #f2f2f2) {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: @name; /* 根据图片高宽比设置向下内边距  高/宽 */
    background: @bgColor;
    
    img {
        width: 100%;
    }
}

#border-radius(@name: 5px) {
    -webkit-border-radius: @name;
    -moz-border-radius: @name;
    border-radius: @name;
}

.text-overflow-many(@width: 100%, @line: 3, @lineHeight: 22px, @height: @line * @lineHeight) {
    width: @width;
    display: -webkit-box;
    -webkit-line-clamp: @line;  //只适用于webkit内核浏览器，故兼容性存在问题
    -webkit-box-orient: vertical;
    overflow: hidden;
    //针对非webkit内核的浏览器兼容性处理
    position: relative;
    line-height: @lineHeight;
    height: @height;
}

.text-overflow() {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#text-vertical(@name) {
    height: @name;
    line-height: @name;
}

.opacity(@val) {
    filter: alpha(opacity=@val);
    opacity: @val / 100;
}

.min-height(@height) {
    min-height: @height;
    height: auto !important;
    _height: @height;
}

//表单元素垂直居中对齐（也可设置顶对齐，底对齐）
.form-element-v-align(@alignment: middle) {
    display: inline-block;
    vertical-align: @alignment;
    *vertical-align: auto;
    *display: inline;
    zoom: 1;
}

//绝对居中(相对于固定宽高的容器)
.absolute-center(@width, @height) {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -(@width / 2);
    margin-top: -(@height / 2);
    width: @width;
    height: @height;
}

//2019.7.8 更新
#transform(@name) {
    -webkit-transform: @name;
       -moz-transform: @name;
        -ms-transform: @name;
         -o-transform: @name;
            transform: @name;
}

#transition(@name) {
    -webkit-transition: @name;
       -moz-transition: @name;
        -ms-transform: @name;
         -o-transition: @name;
            transition: @name;
}

#animation(@name) {
    -webkit-animation: @name;
       -moz-animation: @name;
         -o-animation: @name;
            animation: @name;
}

